<template>
  <div>
    <div id="container" style="width:100%;height:450px;" />
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { TMap } from "./index";
export default {
  props: {
    lat: {
      type: Number,
      default: 34.34127
    },
    lon: {
      type: Number,
      default: 108.93984
    },
    mapKey: {
      tyep: String
    },
    address: {
      tyep: String
    }
  },
  data() {
    return {
      geocoder: undefined,
      marker: null,
      resultDatail: {},
      tmap: null,
      locationInfo: {}
    };
  },
  created() {
    this.initMap();
  },
  methods: {
    async initMap() {
      try {
        // 1. 调用 TMap 函数加载地图，获取全局 TMap 对象（包含所有核心类）
        this.tmap = await TMap(this.mapKey); // 关键：将返回的全局对象存到 this.tmap

        // 2. 使用 this.tmap 访问 LatLng 等类（不再报错！）
        const center = new this.tmap.LatLng(30.67, 104.06); // 成都坐标

        // 3. 创建地图实例
        this.map = new this.tmap.Map(document.getElementById("container"), {
          center: center,
          zoom: 13
        });
        // 3. 创建标记点（用于显示选中位置）
        this.marker = new this.tmap.MultiMarker({
          map: this.map,
          styles: {
            default: new this.tmap.MarkerStyle({
              anchor: { x: 16, y: 32 } // 锚点（底部居中）
            })
          },
          geometries: [
            {
              id: "selectedPoint",
              styleId: "default",
              position: center
            }
          ]
        });

        // 4. 初始化地理编码服务（用于坐标转地址）
        this.geocoder = new this.tmap.service.Geocoder({
          key: this.mapKey // 传入密钥验证
        });
        // 5. 绑定地图点击事件：点击后获取位置信息
        this.map.on("click", event => {
          const clickLatLng = event.latLng; // 点击位置的坐标对象
          console.log(clickLatLng);
          // 更新位置信息（经纬度）
          this.locationInfo.lat = clickLatLng.lat;
          this.locationInfo.lng = clickLatLng.lng;
          // 同步更新输入框
          this.latInput = clickLatLng.lat.toFixed(6);
          this.lngInput = clickLatLng.lng.toFixed(6);
          // 移动标记点到点击位置
          this.marker.updateGeometries([
            {
              id: "selectedPoint",
              position: clickLatLng
            }
          ]);
          // 调用坐标转地址方法
          this.coordToAddress(clickLatLng);
        });

        // 6. 初始解析一次中心点地址
        this.coordToAddress(center);
      } catch (err) {
        console.error("地图初始化失败：", err);
      }
    },
    /**
     * 坐标转地址（逆地理编码）
     * @param {Object} latLng - 可选，TMap.LatLng对象，若不传则使用输入框的经纬度
     */
    coordToAddress(latLng) {
      // 若未传入latLng，则从输入框获取经纬度
      if (!latLng) {
        const lat = parseFloat(this.lat);
        const lng = parseFloat(this.lon);
        // 验证经纬度有效性
        if (!lat || !lng || lat < -90 || lat > 90 || lng < -180 || lng > 180) {
          alert("请输入有效的经纬度（纬度-90~90，经度-180~180）");
          return;
        }
        latLng = new this.tmap.LatLng(lat, lng);
        // 移动地图中心到输入的坐标
        this.map.setCenter(latLng);
        // 移动标记点
        this.marker.updateGeometries([
          {
            id: "selectedPoint",
            position: latLng
          }
        ]);
      }

      // 调用地理编码服务解析地址
      this.geocoder
        .getAddress({
          location: latLng // 传入TMap.LatLng对象
        })
        .then(res => {
          if (res.status === 0 && res.result) {
            const data = {
              ...res.result
            };
            this.$emit("getCoordinates", data);
            console.log(res);
            // 解析成功：更新位置信息
            this.locationInfo.address = res.result.address;
            this.locationInfo.addressComponents =
              res.result.addressComponents || {};
          } else {
            // 解析失败（无结果）
            this.locationInfo.address = "地址解析失败（无匹配结果）";
            this.locationInfo.addressComponents = {};
          }
        })
        .catch(err => {
          // 解析出错（网络或服务问题）
          this.locationInfo.address = `地址解析出错：${err.message}`;
          this.locationInfo.addressComponents = {};
        });
    },

    // 格式化区域信息（省+市+区）
    getAreaInfo() {
      const { province, city, district } = this.locationInfo.addressComponents;
      return [province, city, district].filter(Boolean).join(" ");
    },
    // 初始化地图
    initMap1() {
      TMap(this.mapKey).then(qq => {
        var map;
        var center = new qq.maps.LatLng(this.lat, this.lon);
        map = new qq.maps.Map(document.getElementById("container"), {
          // center: center,
          zoom: 15
        });
        // 调用地址解析类
        this.geocoder = new qq.maps.Geocoder({
          complete: result => {
            map.setCenter(result.detail.location);
            this.marker = new qq.maps.Marker({
              map,
              position: result.detail.location
            });
            this.resultDatail = result.detail;
            this.$emit("getCoordinates", result.detail);
          },
          error: err => {
            this.$message.error("请重新输入地址，地址中请包括省市区信息");
          }
        });
        console.log(this.address);
        this.geocoder.getAddress(center);

        // this.geocoder.getLocation(this.address);
        // 开启监听点击
        qq.maps.event.addListener(map, "click", event => {
          this.marker.setMap(null);
          this.marker.position = {
            lat: event.latLng.getLat(),
            lng: event.latLng.getLng()
          };
          var coord = new qq.maps.LatLng(
            event.latLng.getLat(),
            event.latLng.getLng()
          );
          this.geocoder.getAddress(coord);
        });
      });
    },
    // 搜索地点
    searchKeyword(address = "西安") {
      // this.marker.setMap(null);
      // this.geocoder.getLocation(address);
      // 调用地理编码服务的地址搜索接口
      this.geocoder
        .getLocation({
          address: address, // 关键字
          region: "" // 可选：限制城市（如"成都市"），不填则全国搜索
        })
        .then(res => {
          console.log(res.status == 0, res.result, res.result.location);
          if (res.status == 0 && res.result && res.result.location) {
            // 搜索成功：格式化结果（提取经纬度和地址）
            // this.searchResults = res.result.location.map(loc => ({
            //   location: new this.tmap.LatLng(loc.lat, loc.lng), // 坐标对象
            //   address: loc.title // 地址名称
            // }));
            // console.log(this.searchResults);
            const data = {
              ...res.result,
              address
            };

            this.selectSearchResult(data);
          } else {
            this.searchResults = [];
            alert("未找到匹配的地址，请尝试更精确的关键词");
          }
        })
        .catch(err => {
          this.searchResults = [];
          alert(`搜索失败：${err.message}`);
        });
    },
    /**
     * 选择搜索结果中的地址
     */
    selectSearchResult(item) {
      console.log(666, item);
      // 更新地图中心和标记点
      this.map.setCenter(item.location);
      this.marker.updateGeometries([
        {
          id: "selected",
          position: item.location
        }
      ]);

      // 解析坐标对应的详细地址
      this.geocoder
        .getAddress({ location: item.location })
        .then(res => {
          if (res.status === 0 && res.result) {
            console.log(res);
            this.locationInfo.address = res.result.address;
            this.locationInfo.addressComponents =
              res.result.addressComponents || {};
          } else {
            this.locationInfo.address = "地址解析失败";
            this.locationInfo.addressComponents = {};
          }
        })
        .catch(err => {
          this.locationInfo.address = `解析错误：${err.message}`;
        });
    }
  }
};
</script>

<style scoped></style>
